<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>My First chart using FusionWidgets</title>
<script type="text/javascript" src="FusionCharts.js"></script>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="FusionCharts.jqueryplugin.js"></script>
</head>
<body>
	<div id="scDiv">FusionWidgets will load here!</div>
	<script type="text/javascript">
	var jsonData ={
		    "chart": {
		    	"canvasbgalpha":"0",
		    	"bgAlpha":"0" ,
		    	"bgImageAlpha":"0", 
		    	"lowerlimit": "0",
		        "upperlimit": "100",
		        "showborder": "0",
		        "chartrightmargin": "0",
		        "chartleftmargin": "0",
		        "charttopmargin": "0",
		        "chartbottommargin": "0"
		    },
		    "colorrange": {
		        "color": [
		            {
		                "minvalue": "0",
		                "maxvalue": "45",
		                "code": "FF654F"
		            },
		            {
		                "minvalue": "45",
		                "maxvalue": "80",
		                "code": "F6BD0F"
		            },
		            {
		                "minvalue": "80",
		                "maxvalue": "100",
		                "code": "8BBA00"
		            }
		        ]
		    },
		    "dials": {
		        "dial": [
		            {
		                "value": "72"
		            }
		        ]
		    }
		};
		
	$(document).ready(
			function(){
				$("#scDiv").insertFusionCharts({
					swfUrl : "AngularGauge.swf",
					dataSource : jsonData,
					dataFormat : "json",
					width : "400",
					height : "200",
					id : "scChart"
				});
			});       
 </script>
</body>
</html>